
import axios from 'axios';
import { Modal } from 'antd-mobile'
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
const PaymentCountdown = ({ deadline, id }) => {
    const [timeLeft, setTimeLeft] = useState(deadline);
    const [showAlert, setShowAlert] = useState(false);
    const navigate = useNavigate()
    useEffect(() => {
        const timer = setInterval(() => {
            setTimeLeft(prevTimeLeft => {
                if (prevTimeLeft > 0) {
                    return prevTimeLeft - 1;
                } else {
                    clearInterval(timer);
                    setShowAlert(true);
                    return 0;
                }
            });
        }, 1000);

        return () => clearInterval(timer);
    }, []);

    useEffect(() => {
        if (showAlert) {
            axios.get(`/OrderRouter/OrderDel?id=${id}`).then(res => {
                if (res.data.code == 200) {
                    Modal.alert({
                        content: '您下单的订单时间到了，请重新下单',
                        onConfirm: () => {
                            navigate('/order')
                        },
                    })
                }
            })
        }
    }, [showAlert]);

    const hours = Math.floor(timeLeft / 3600);
    const minutes = Math.floor((timeLeft % 3600) / 60);
    const seconds = timeLeft % 60;

    return (
        <div>
            {hours}小时{minutes}分钟{seconds}秒
        </div>
    );
};

export default PaymentCountdown;